<template>
	<view class="main-container">
		<view class="header-container">
			<view class="title">{{ topic }}</view>
			<view class="create-time">创建时间：{{ createTime }}</view>
		</view>
		<view class="content">
			<rich-text :nodes="content"></rich-text>
		</view>

		<view class="viewMission">
			<block v-if="viewMission">
				<image src="/static/image/view-unfinished@2x.png" style="width: 100rpx; height: 140rpx"></image>
				<text class="endTimer">浏览{{ timeCount }}秒可得奖励</text>
			</block>
			<image class="viewMission-complete" v-if="hasComplete" src="/static/image/view-complete2@2x.png"
				@tap="receivePrice"></image>
		</view>
	</view>
</template>

<script>
	import loading from '../../../components/loading/loading';
	const app = getApp();

	var util = require('../../../utils/util.js');

	import {
		baseImgUrl,
	} from '../../../utils/constant.js'
	import {
		http
	} from '@/utils/commonRequest.js'; // 局部引入

	export default {
		components: {
			loading
		},
		data() {
			return {
				loading: 0,
				id: '',
				baseUrl: baseImgUrl,
				content: null,
				createTime: '',
				type: null,
				topic: '',
				outlook: null,
				viewMission: false,
				hasComplete: false,
				timeCount: '10',
				timeOut: '',
				dicType: '',
				dictId: '',
				taskId: '',
				share: null,
				linkType: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let that = this;
			var id = options.id;

			if (!util.isEmpty(id)) {
				this.id = id
        http.post('/message/read', {
            id: id
        },{header: {"content-type":"application/x-www-form-urlencoded"}});
			}

			this.loadData();

			if (options.dictId) {
				that.viewMission = options.share ? false : true
				that.dicType = options.dicType
				that.dictId = options.dictId
				that.taskId = options.taskId
				that.share = options.share
			}
		},
		onShow: function() {
			if (this.dictId && !this.share) {
				this.timeOutStart();
			}
		},
		/** 页面隐藏 */
		onHide: function() {
			clearTimeout(this.timeOut);
		},
		/** 页面关闭 */
		onUnload: function() {
			clearTimeout(this.timeOut);
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function(options) {
			let that = this;

			if (that.share == undefined) {
				return;
			} else {
				that.taskAddLog();
				return {
					title: '分享测试',
					path: '/pages/message/messageDetail/messageDetail?id=' + that.id
				};
			}
		},
		/** 分享 */
		onShareTimeline: function() {
			let that = this;
			console.log(that.dicType, that.dictId);

			if (that.share == undefined) {
				return;
			} else {
				that.taskAddLog();
				return {
					title: '分享测试',
					path: '/pages/message/messageDetail/messageDetail?id=' + that.id
				};
			}
		},
		methods: {
			loadData: function() {
				var that = this;
				this.$checkLogin()
					.then((res) => {
						that.getMessageDetail(); //加载数据
					})
					.catch((err) => {
						console.log(err);
					});
			},

			getMessageDetail() {
				var that = this;
				var id = that.id;
				http.get('message/detail/' + id, {}).then((res) => {
					if (200 == res.data.code) {
						console.log(res.data);
						let message = res.data.message;
						let linkType = message.linkType;
						let createTime = message.createTime.substring(0, 10);
						let title = message.messageTitle ? message.messageTitle : '';
						that.linkType = linkType
						that.loading = 1

						if (linkType == '1') {
							that.createTime = createTime
							that.outlook = message.link1
							that.topic = title
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/outlink/outlink?outlink=' + message.link1
								});
							}, 1000);
						} else {
							var content = message.messageContent;
							content = content.replace(/src="attached\/image/g, 'src="' + that.baseUrl +
								'/attached/image');
							let title = null;
							title = message.messageTitle;
							that.content = content
							that.createTime = createTime
							that.topic = title
							util.hideLoading();
						}
					} else {
						util.hideLoading();
						console.log('查询资讯详情失败');
					}
				});
			},

			/** 完成任务返回 */
			receivePrice: function() {
				uni.navigateBack({
					delta: 1
				});
			},

			timeOutStart: function() {
				let that = this;
				let type = that.dicType;
				let id = that.dictId;
				let taskId = that.taskId;
				that.timeOut = setInterval(function() {
					let count = that.timeCount - 1;
					that.timeCount = count

					if (that.timeCount == 0) {
						that.viewMission = false
						that.hasComplete = true
						app.globalData.taskLog(type, id, taskId);
						clearInterval(that.timeOut);
					}
				}, 1000);
			},

			taskAddLog: function() {
				let that = this;
				let type = that.dicType;
				let id = that.dictId;
				let taskId = that.taskId;
				app.globalData.taskLog(type, id, taskId, 'share');
			}
		}
	};
</script>
<style>
	page {
		min-height: 100vh;
		background-color: #fff;
	}

	.main-container {
		padding: 20rpx;
		background-color: #fff;
	}

	.header-container {
		border-bottom: 1px solid #dedede;
		padding: 20rpx 0;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.create-time {
		color: #999;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.content {
		padding: 20rpx 0;
		/* text-indent: 2em; */
	}

	.viewMission {
		position: fixed;
		right: 24rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 999;
		/* zoom: .6; */
	}

	.viewMission-complete {
		width: 100rpx;
		height: 140rpx;
		/* zoom: 0.6; */
	}

	.endTimer {
		display: inline-block;
		width: 54rpx;
		height: 56rpx;
		/* line-height: 20rpx; */
		font-size: 12rpx;
		font-weight: 500;
		color: #fff;
		position: absolute;
		top: 70rpx;
		left: 24rpx;
		text-align: center;
		padding-top: 4rpx;
	}
</style>
